<template>
<div id="shop-about">
  <div class="shop-about bg">
    <h1 v-text="storeInfo.company"></h1>
    <!-- 店铺简介和主营行业 -->
    <div class="row line">
      <!-- 档案信息 -->
      <div class="col-md-6 detail">{{storeInfo.shopIntroduction}}</div>
      <!-- 主营行业等信息 -->
      <div class="col-md-4 col-md-offset-2">
        <div class="line">
          <span class="title w76">主营行业</span>
          <span class="value">{{storeInfo.mainIndustry}}</span>
        </div>
        <div class="line">
          <span class="title w76">主营产品</span>
          <span class="value">{{storeInfo.mainProducts}}</span>
        </div>
        <div class="line">
          <span class="title w76">产品风格</span>
          <span class="value">{{storeInfo.productStyle}}</span>
        </div>
        <div class="line">
          <span class="title w76">客户群体</span>
          <span class="value">{{storeInfo.mainCustomerGroups}}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="shop-about">
    <!-- 店铺简介和主营行业 -->
    <div class="row line">
      <!-- 档案信息 -->
      <div class="col-md-6">
        <div class="line">
          <span class="title w76">企业类型</span>
          <span class="value">{{storeInfo.enterpriseType}}</span>
        </div>
        <div class="line">
          <span class="title w76">企业执照号</span>
          <span class="value">{{storeInfo.licenseNumber}}</span>
        </div>
        <div class="line">
          <span class="title w76">员工人数</span>
          <span class="value">{{storeInfo.employeesNum}}</span>
        </div>
      </div>
      <!-- 主营行业等信息 -->
      <div class="col-md-4 col-md-offset-2">
        <div class="line">
          <span class="title w76">年出口额</span>
          <span class="value">{{storeInfo.yearExportNum || 0}}元</span>
        </div>
        <div class="line">
          <span class="title w76">年营业额</span>
          <span class="value">{{storeInfo.yearSales || 0}}元</span>
        </div>
        <div class="line">
          <span class="title w76">月产量</span>
          <span class="value">{{storeInfo.monthProduction || 0}}件</span>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
// 导入店铺详情接口
import { apiStoreArchives } from 'js/api'

export default {
  data() {
    return {
      storeInfo: {}
    }
  },
  created() {
    this.getStoreArchives()
  },
  methods: {
    getStoreArchives() {
      // 请求接口，加载数据
      apiStoreArchives(Number(this.$route.params.id), this.$store.getters.token).then((data) => {
        this.storeInfo = data.StoreArchives || {}
      })
    }
  },
  watch: {
    $route(to, from) {
      if (to.params.id != from.params.id) {
        this.getStoreArchives()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-about {
  background-color: #FFFFFF;
  border-bottom: 1px solid #f6f6f6;
  width: 1230px;
  margin: 0 auto;
  padding: 20px 74px;

  &.bg {
    background-image: url('../../assets/storebg.png');
    background-position: top right;
    background-repeat: no-repeat;
  }

  h1 {
    color: #444444;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 40px;
    padding-left: 10px;
    text-align: center;
  }

  .line {
    display: block;
    padding-bottom: 14px;

    .detail {
      color: #999999;
      line-height: 2;
    }

    .title {
      color: #999999;
      margin-right: 20px;

      &.w76 {
        display: inline-block;
        width: 76px;
        text-align: right;
      }
    }

    .value {
      color: #666666;
    }
  }
}
</style>